<template>
  <!-- 弹框 -->
  <el-dialog :visible.sync="dialogShow" :title="title" width="30%" @close="onClose">
    <!-- 表单区域 -->
    <el-form
      ref="form"
      label-width="100px"
      :model="quartData"
      :rules="formRules"
    >
      <el-form-item label="分类名称" prop="catename">
        <el-input v-model="quartData.catename" :style="{ width: '300px' }" placeholder="请输入" />
      </el-form-item>

      <el-row type="flex" justify="end">
        <el-button size="small" @click="dialogShow = false">取消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="onSubmit"
        >确定</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import { addContentInfo, putContentInfoId } from '@/api/content/content_cate'
export default {
  name: 'AddFormRos',
  data() {
    return {
      // 弹框控制变量
      dialogShow: false,
      // 表单数据变量
      quartData: {
        catename: ''
      },
      // 表单验证规则
      formRules: {
        catename: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      return this.quartData.id ? '修改分类' : '添加分类'
    }
  },
  methods: {
    // 提交行为
    async onSubmit() {
      // 表单的校验
      await this.$refs.form.validate()
      // 加工处理表单数据(拷贝一份再加工)
      // 请求的发生
      // const res = await addContentInfo(this.quartData)
      // console.log(res)
      // this.quartData.id
      //   ? await putContentInfoId(this.quartData)
      //   : await addContentInfo(this.quartData)
      // 提示效果
      // this.$message.success(res.data.msg)

      if (this.quartData.id) {
        await putContentInfoId(this.quartData)
        this.$message.success('修改成功')
      } else {
        const { data } = await addContentInfo(this.quartData)
        if (!data.success) {
          this.$notify.error({
            title: '错误提示',
            message: data.msg
          })
        } else {
          this.$message.success('添加成功')
        }
      }

      // this.$message.success(this.quartData.id ? '修改成功' : '添加成功')
      this.onClose()
      this.$emit('updataList')
      // this.$message.success(this.quartData.id ? 'res.data.msg' : '添加成功')
      // // 关闭弹框
      // this.dialogShow = false
      // // 列表更新
      // this.$emit('updataList')
    },
    // 弹框关闭
    onClose() {
      // 表单重置
      this.quartData = {
        catename: ''
      }
      this.$refs.form.clearValidate()
      // 移除校验
      this.dialogShow = false
    }
  }
}
</script>
<style scoped>
 .el-dialog{
border-bottom: 1px solid #000 ;
}
</style>
